<template>
    <div>
        <j-modal
            class="screenModal"
            title="分配专家"
            :visible="visible"
            :width="1000"
            :maskClosable="false"
            :switchFullscreen="switchFullscreen"
            @cancel="handleCancel"
            @ok="handleOk"
        >
        
            <div class="expertBox">
                <div class="" style="display:flex;align-items:center;margin-bottom:16px;">
                    <a-button type="primary" style="margin-right:24px;" @click="deleteExpert">删除</a-button>
                    <h2>已选专家</h2>
                </div>
                <a-spin :spinning="selectedSpinning">
                    <ul class="selectExpertBox">
                        <li v-for="(item, index) in selectExpertList" :key="index" :class="item.selected?'selectedExpertActive':''" @click="handelSelectExpert(index, item)"><span>{{item.zj_xm}}</span><i></i></li>
                    </ul>
                </a-spin>
                
                <div class="table-page-search-wrapper" style="margin-top:16px;">
                    <a-form layout="inline">
                        <a-row :gutter="24">
                            <a-col :span="12">
                                <a-form-item label="姓名：">
                                    <a-input placeholder="请填写姓名" v-model="queryParam.zj_xm"></a-input>
                                </a-form-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-item label="单位：">
                                    <a-input placeholder="请填写单位" v-model="queryParam.zj_dw"></a-input>
                                </a-form-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-item label="专业类别：">
                                    <a-input placeholder="请填写专业类别" v-model="queryParam.zj_lb"></a-input>
                                </a-form-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-item label="评审角色：">
                                    <a-input placeholder="请填写评审角色" v-model="queryParam.zj_psjs"></a-input>
                                </a-form-item>
                            </a-col>
                            <a-col :span="12">
                                <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                                    <a-button type="primary" icon="search" @click="searchQuery">查询</a-button>
                                    <a-button type="primary" icon="reload"  @click="searchReset" style="margin-left: 8px">重置</a-button>
                                </span>
                            </a-col>
                        </a-row>
                    </a-form>
                </div>
                <div class="expertList">
                    <a-spin :spinning="spinning">
                        <ol>
                            <li v-for="(item, index) in expertList" :key="index" :class="item.selected ? 'expertActive' : ''" @click="handelExpert(index, item)">
                                <span>{{item.zj_xm}}</span>
                                <p>
                                    <b>{{item.zj_sj}}</b>
                                    <b>{{item.zj_gzdw}}</b>
                                </p>
                            </li>
                        </ol>
                    </a-spin>
                </div>
            </div>
        </j-modal>
    </div>
</template>

<script>
import {
    cxjdjpsFzzjdeleteBatch
} from "@/api/api"
import { getAction } from '@/api/manage';
export default {
    props: ['expertFlag','flId','fsfzid'],
    data(){
        return {
            visible: false,
            switchFullscreen: true,
            queryParam: {},
            selectExpertList: [],
            expertList: [],
            expertIds: [],
            selectedIds: [],
            spinning: false,
            selectedSpinning: false
        }
    },
    watch: {
        expertFlag(next, prev) {
            if (next != prev) {
                var self = this;
                self.visible = !self.visible;
                self.waitExpertList();
                self.selectedExpertList();
            }
        }
    },
    methods: {
        handleCancel(){
            this.expertIds = [];
            this.visible = false;
            this.$parent.$parent.loadData();
            this.queryParam = {};
        },
        searchQuery(){
            if (!this.queryParam.zj_xm) {
                delete this.queryParam.zj_xm
            }
            if (!this.queryParam.zj_dw) {
                delete this.queryParam.zj_dw
            }
            if (!this.queryParam.zj_lb) {
                delete this.queryParam.zj_lb
            }
            if (!this.queryParam.zj_psjs) {
                delete this.queryParam.zj_psjs
            }
            this.waitExpertList();
        },

        searchReset() {
            this.queryParam = {}
            this.queryParam.fsfzid = this.fsfzid;
            this.waitExpertList();
        },
        deleteExpert(){
            if (this.selectedIds.length) {
                let data = {
                    ids: this.selectedIds.join(','),
                    csfzid: this.fsfzid
                }
                cxjdjpsFzzjdeleteBatch(data).then(res=>{
                    if (res.success) {
                        this.selectedIds = [];
                        this.$message.success(res.message);
                        this.selectedExpertList();
                        this.waitExpertList();
                    }
                })
            } else {
                this.$message.warning("请选择要删除的专家！");
            }
            
        },
        // 点击已选专家
        handelSelectExpert(index, item){
            this.selectedIds = [];
            item.selected = !item.selected;
            this.selectExpertList.map(item=>{
                if (item.selected) {
                    this.selectedIds.push(item.id1);
                }
            })
        },
        handelExpert(index, item){
            this.expertIds = [];
            item.selected = !item.selected;
            this.expertList.map(item=>{
                if (item.selected) {
                    this.expertIds.push(item.id);
                }
            })
        },
        handleOk(){
            let data = {
                fsfzid: this.fsfzid,
                // csfzid: this.csfzid,
                ids: this.expertIds.join(',')
            }
            if (this.expertIds.length) {
                this.$emit("addExpert", data)
            } else {
                this.$message.warning("请选择要添加的专家");
            }
            
        },
        // handleCancel(){
        //     this.expertIds = [];
        //     this.selectExpertList = [];
        //     this.expertList = [];
        // },
        selectedExpertList(){
            this.selectedSpinning = true;
            let data = {
                csfzid: this.fsfzid
            }
            let that = this;
            let httpurl = "/cxj/cxjDjpsFzZj/cxjdjps_fzzjlist_yx"
            getAction(httpurl,data).then((res)=>{
                console.log('已选专家',res)
                if(res.success){
                    this.selectedSpinning = false;
                    res.result.map(item=>{
                        item.selected = false;
                    })
                    this.selectExpertList = res.result;
                    // console.log('已选专家列表', this.selectExpertList)
                }
            }).finally(() => {
                that.confirmLoading = false;
            })

            /* cxjcsFzzjlistYx(data).then((res)=>{
                if(res.success){
                    this.selectedSpinning = false;
                    res.result.map(item=>{
                        item.selected = false;
                    })
                    this.selectExpertList = res.result;
                    // console.log('已选专家列表', this.selectExpertList)
                }
            }).finally(() => {
                this.confirmLoading = false;
            }) */
        },
        waitExpertList(){
            this.spinning = true;
            this.queryParam.csfzid = this.fsfzid;
            /* cxjcsFzzjlistDx(this.queryParam).then((res)=>{
                if(res.success){
                    this.spinning = false;
                    res.result.map(item=>{
                        item.selected = false;
                    })
                    this.expertList = res.result;
                    // console.log('待选专家列表', this.expertList)
                }
            }).finally(() => {
                this.confirmLoading = false;
            }) */
            let that = this;
            let httpurl = "/cxj/cxjDjpsFzZj/cxjdjps_fzzjlist_dx"
            that.waitLoading = true;
            console.log('获取参数',that.queryParam)
            getAction(httpurl,that.queryParam).then((res)=>{
                console.log('待选专家',res)
                if(res.success){
                    this.spinning = false;
                    res.result.map(item=>{
                        item.selected = false;
                    })
                    this.expertList = res.result;
                    // console.log('待选专家列表', this.expertList)
                }
            }).finally(() => {
                that.confirmLoading = false;
            })
        },
    }
}
</script>

<style scoped lang='less'>
.expertBox {
    h2 {
        font-size: 16px;
        font-family: PingFangSCRegular;
        color: #3388EE;
        margin-bottom: 0;
        // line-height: 22px;
    }
    .selectExpertBox {
        display: flex;
        flex-wrap: wrap;
        padding-bottom: 25px;
        border-bottom: 1px solid #ECEBEB;
        box-sizing: border-box;
        li {
            cursor: pointer;
            margin-right: 15px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            background:rgba(51,136,238,0.1) none repeat scroll !important;
            border-radius: 4px;
            border: 1px solid #3388EE;
            min-width: 80px;
            margin-bottom: 12px;
            span {
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #333333;
            }
            &.selectedExpertActive {
                background:rgba(51,136,238,1) none repeat scroll !important;
                span {
                    color: #fff;
                }
            }
        }
    }
    .expertList {
        ol {
            display: flex;
            flex-wrap: wrap;
            // justify-content: space-between;
            li {
                cursor: pointer;
                width: 120px;
                display: flex;
                flex-direction: column;
                height: 90px;
                border-radius: 4px;
                overflow: hidden;
                border: 1px solid #3388EE;
                margin-right: 11px;
                margin-bottom: 12px;
                span {
                    width: 100%;
                    display: block;
                    height: 36px;
                    // background: #3388EE;
                    // opacity: 0.1;
                    background:rgba(51,136,238,0.1) none repeat scroll !important;
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #333333;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
                p {
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    margin: 0;
                    b {
                        width: 100%;
                        display: block;
                        // height: 54px;
                        background: #fff;
                        font-size: 10px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #333333;
                        line-height: 24px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }
                }
                
                &.expertActive {
                    span {
                        background:rgba(51,136,238,1) none repeat scroll !important;
                        color: #fff;

                    }
                    b {
                        color: #3388EE;
                    }
                }
            }
        }
    }
}
</style>